summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/routes/archives/[id]/+page.svelte
blob: 50a294063eb45bd387bc8b8ffa614bcee749f318 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script lang="ts">
	import { updateArchives } from '$gql/Mutations';
	import { archiveQuery } from '$gql/Queries';
	import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql';
	import { initReaderContext } from '$lib/Reader';
	import { initSelectionContext } from '$lib/Selection';
	import { setTabContext } from '$lib/Tabs';
	import { toastFinally } from '$lib/Toasts';
	import Guard from '$lib/components/Guard.svelte';
	import Head from '$lib/components/Head.svelte';
	import Titlebar from '$lib/components/Titlebar.svelte';
	import Grid from '$lib/containers/Grid.svelte';
	import Gallery from '$lib/gallery/Gallery.svelte';
	import PageView from '$lib/reader/PageView.svelte';
	import Reader from '$lib/reader/Reader.svelte';
	import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte';
	import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte';
	import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte';
	import Tab from '$lib/tabs/Tab.svelte';
	import Tabs from '$lib/tabs/Tabs.svelte';
	import { getContextClient } from '@urql/svelte';
	import type { PageData } from './$types';

	export let data: PageData;
	const client = getContextClient();
	const reader = initReaderContext();
	setTabContext({
		tabs: {
			details: { title: 'Details' },
			edit: { title: 'Edit' },
			deletion: { title: 'Delete' }
		},
		current: 'details'
	});

	$: result = archiveQuery(client, { id: data.id });

	function updateCover(event: CustomEvent<number>) {
		updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch(
			toastFinally
		);
	}

	let archive: FullArchiveFragment;

	$: $result, update();
	function update() {
		if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
			archive = structuredClone($result.data.archive);

			$reader.pages = archive.pages;
		}
	}

	const selection = initSelectionContext<PageFragment>('Page', (p) => p.path);
	$selection.selectable = (p) => p.comicId === null;

	$: if (archive) {
		$selection.view = archive.pages;
	}
</script>

<Head section="Archive" title={archive?.name} />

{#if archive}
	<Grid>
		<header>
			<Titlebar title={archive.name} />
		</header>

		<aside>
			<Tabs>
				<Tab id="details">
					<ArchiveDetails {archive} />
				</Tab>
				<Tab id="edit">
					<ArchiveEdit {archive} />
				</Tab>
				<Tab id="deletion">
					<ArchiveDelete {archive} />
				</Tab>
			</Tabs>
		</aside>

		<main class="overflow-auto">
			<Gallery
				pages={archive.pages}
				on:open={(e) => ($reader = $reader.open(e.detail))}
				on:cover={updateCover}
			/>
		</main>
	</Grid>
{:else}
	<Guard {result} />
{/if}

<Reader>
	<PageView layout={Layout.Single} direction={Direction.LeftToRight} />
</Reader>